import React from 'react'
import { SchemaForm, Item, Submit, SchemaType } from '@amazebird/antd-schema-form'
import ArrayItem from './ArrayItem'

const test = () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({ aa:11 })
  }, 1000);
})

const schema = {
  array: {
    label: '数组',
    type: 'array',
    component: ArrayItem,
    props: {
      columns: [
        { label: <label style={{ fontWeight: 'bolder' }}>姓名</label>, span: 5, key: 'name' },
        { label: <label style={{ fontWeight: 'bolder' }}>年龄</label>, span: 5, key: 'age' },
        { label: <label style={{ fontWeight: 'bolder' }}>性别</label>, span: 5, key: 'sexuality' }
      ],
      recordAction: ['delete', 'down', 'up', 'drag'],
      showIndex: {
        // label: (index) => '数组' + index,
        headerLabel: <label style={{ fontWeight: 'bolder' }}>数组</label>,
        width: 60
      },
      add: {
        // icon: <DeleteOutlined />,
        // text: null
        beforeAction: test,
        // todo 这部分的报错问题需要排查
        // afterAction: (action, ) => {
        //   action.remove(0)
        // }
      }
    },
    item: {
      type: 'object',
      fields: {
        name: {
          component: 'Input',
        },
        age: {
          component: 'Input'
        },
        sexuality: {
          component: 'Input'
        },
      },
    }
  },
  test: {
    label: '测试',
    component: 'Input'
  }
}

const initialValues = {
  array: [{
    name: 'test',
    age: 10,
    sexuality: '女'
  }, {
    name: 'test2',
    age: 20,
    sexuality: '女'
  }, {
    name: 'test3',
    age: 20,
    sexuality: '男'
  }]
}

export default function () {
  function onFinish(data) {
    console.info(data)
  }
  return (
    <SchemaForm schema={schema as SchemaType} initialValues={initialValues}>
      <Item field="array" />
      <Item field="test" />
      <Submit onFinish={onFinish} />
    </SchemaForm>
  )
}
